<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单例模式弹框</title>
    <style>
        #model {
            width: 200px;
            height: 200px;
            line-height: 200px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>

<body>
    <button id="btn1">open</button>
    <button id="btn2">close</button>

    <script>
        let btn1 = document.getElementById('btn1')
        let btn2 = document.getElementById('btn2')
        // let model = document.createElement('div');

        // btn1.addEventListener('click', function () {

        //     model.innerHTML = `我是弹框`
        //     model.id = 'model'
        //     model.style.dispaly = 'block'
        //     document.body.appendChild(model)
        // })
        // btn2.addEventListener('click', function () {
        //     model.style.dispaly = 'none'
        //     document.body.removeChild(model)
        // })

        const Model = (function () {
            let model = null;
            return function () {
                // if (model) {
                //     return model;
                // } else {s
                //     model = document.createElement('div');
                //     model.innerHTML = `我是弹框${id}`;
                //     model.id = 'model';
                //     model.style.display = 'none';
                //     document.body.appendChild(model);
                //     return model;
                // }
                if (!model) {
                    model = document.createElement('div');
                    model.innerHTML = `我是弹框`;
                    model.id = 'model';
                    model.style.display = 'none';
                    document.body.appendChild(model);
                }
                return model;
            }
        })()
        btn1.addEventListener('click', function () {
            const model = Model();
            model.style.display = 'block';
        })
        btn2.addEventListener('click', function () {
            const model = Model();
            if (model) {
                model.style.display = 'none';
            }
        })
    </script>
</body>

</html>